<template>
    <div class="app">
        <Header/>
        <div class="back">
            <div class="con">
              <div class="pxes"></div>
              <div class="listneo">
                <div class="datale">
                    <div class="borebon sonh_g">
                      <ul>
                        <span>账号管理</span>
                        <li><router-link to="/co31">我的资料</router-link></li>
                        <li><router-link to="/co32">安全设置</router-link></li>
                        <li><router-link to="/co33">个人成长信息</router-link></li>
                        <li><router-link to="/co34">个人交易信息</router-link></li>
                      </ul>
                    </div>
                  </div>
                <div class="conres">
                  <div class="ra">我的资料</div>
                  <div class="toxian">
                        <div class="dhdioo">基本资料</div>
                        <div class="afeio">
                          <div>当前头像</div>
                            <el-upload
                              class="avatar-uploader"
                              action="http://47.105.66.232:8091/uploadImage"
                              :show-file-list="false"
                              :limit = "1"
                              :on-success="handleAvatarSuccess"
                              :before-upload="beforeAvatarUpload">
                              <img v-if="imageUrl" :src="imageUrl" class="avatar">
                              <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                            </el-upload>
                        </div>

                        <div class="gerrn">
                          <div>亲爱的*****，完整填写个人信息会有助于 <p>提高免费体验成功率</p> 哦。</div>
                        </div>

                        <div class="fome">
                          <el-form ref="form" :model="form" label-width="120px">

                            <el-form-item label="昵称">
                              <el-input v-model="form.name" style="width: 25%;"></el-input>
                            </el-form-item>

                            <div class="adfwfief">*昵称填写须知：昵称不可重复，与商家品牌冲突的昵称，平台将有可能收回</div>
                            <el-form-item label="真实姓名：">
                              <el-input v-model="form.region" style="width: 25%;"></el-input>
                            </el-form-item>

                            <el-form-item label="性别：">
                              <el-radio-group v-model="form.date1">
                                <el-radio label="1" :value="1">男</el-radio>
                                <el-radio label="0" :value="0">女</el-radio>
                              </el-radio-group>
                            </el-form-item>
                            <el-form-item label="年龄：">
                              <el-input v-model="form.date2" style="width: 25%;"></el-input>
                            </el-form-item>
                            <el-form-item label="职业：">
                              <el-input v-model="form.resource" style="width: 25%;"></el-input>
                            </el-form-item>
                            <el-form-item label="个人标签：">
                              <el-input v-model="form.desc" style="width: 25%;"></el-input>
                            </el-form-item>
                            <el-form-item label="自我介绍：">
                              <el-input type="textarea" v-model="form.aaeet" style="width: 40%;"></el-input>
                            </el-form-item>
                            <el-form-item>
                              <el-button type="danger" @click="onSubmit">保存</el-button>

                            </el-form-item>
                          </el-form>
                        </div>

                  </div>
                </div>
              </div>
              <coreF/>
            </div>
        </div>
        <Footer/>
    </div>
</template>
<script>
import Header from '@/components/Header'
import Footer from '@/components/Footer'
import coreF from '@/components/coreF'
import axios from 'axios'
import qs from 'qs'
export default {
    components: {
    Header,
    Footer,
    coreF
    },
    data() {
      return {
        usernameid:"",
        imageUrl: '',
        imgere:"",
        form: {
          name: '',
          region: '',
          date1: '',
          date2: '',
          resource: '',
          desc: '',
          aaeet:''
        }
      }

    },
    mounted() {
    },
    methods: {
      async onSubmit() {
        
      },

      handleAvatarSuccess(res, file) {
          this.imageUrl = URL.createObjectURL(file.raw)//本地图片地址
          console.log(file.response.body)
          this.imgere = file.response.body//服务器数据
        },
      beforeAvatarUpload(file) {
        const isJPG = file.type === 'image/jpeg';
        const isLt2M = file.size / 1024 / 1024 < 2;

        if (!isJPG) {
          this.$message.error('上传头像图片只能是 JPG，PNG 格式!');
        }
        if (!isLt2M) {
          this.$message.error('上传头像图片大小不能超过 2MB!');
        }
        return isJPG && isLt2M;
      }
    },
}
</script>
<style scoped>
.app  /deep/  .ist_l .ist_c li:nth-child(2) {
    background-color: #ff9381;
    width: 126px;
    height: 50px;
    display: block;
}
.conres /deep/  .el-tabs__nav {margin-left: 60px}
.conres /deep/ .el-tabs__item.is-active {color: #f06048;}
.conres /deep/ .el-tabs__active-bar {color: #f06048;}
.conres /deep/ .el-tabs__item:hover {color: #f06048;}
.conres /deep/ .el-tabs__active-bar {background-color:#f06048 }
.flex_lr {
  display: flex;
  justify-content: space-between;
}
.box {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.back {
    background-color: #f06048
}
.pxes {
  height: 15px;
}
.back .con {
  width: 1200px;
  margin: 0 auto;
  background-color: #eee
}
.listneo {
  width: 1161px;
  margin: 0px auto;
  display: flex;
  justify-content: space-between;
}
.conres {
  width: 930px;
  border-radius: 6px;
  background-color: #fff
}

.conres .ra {
  font-size: 20px;
  color: #fff;
  text-align: center;
  line-height: 43px;
  margin-left: 14px;
  position: relative;
  top: 15px;
  width: 192px;
	height: 43px;
	background-color: #f06048;
	box-shadow: 0px 4px 2px 0px
		rgba(70, 23, 15, 0.38);
	border-radius: 0px 0px 20px 20px;
}
.toxian {
  margin-top: 23px;
}
.gerrn {
  width: 810px;
  margin: 0 auto;
}

.datale .router-link-exact-active {
  color: #ff9381;
}
.datale a:hover{
  color: #ff9381;
}
.datale {
  width: 216px;
	background-color: #ffffff;
	border-radius: 6px;
  height: 200px;
}
.ontoi .datale .sonh_g li{
  width: 120px;
}
.borebon {
  border-bottom: 12px solid #eee;
}
.borebon ul{
  display: inline-block;
  margin-left: 20px;

}
.borebon ul span{
  font-size: 24px;
	font-weight: 550;
	font-stretch: normal;
	line-height: 32px;
	letter-spacing: 0px;
	color: #313131;
  display: block;
  margin-top: 10px;
  margin-bottom: 15px;
}
.borebon ul li {
      width: 146px;
    line-height: 34px;
    font-size: 15px
}
.gerrn p {
  display: inline-block;
	color: #f06048;
}
.adfwfief {
  	font-family: SourceHanSansCN-Regular;
	font-size: 16px;
	font-weight: normal;
	font-stretch: normal;
	line-height: 34px;
	letter-spacing: 0px;
  color: #9e9e9e;
  margin-left: 73px;
}
.dhdioo {
    font-size: 18px;
    margin-top: 20px;
    margin-bottom: 20px;
    margin-left: 50px;
    border-bottom: 3px solid #f00;
    width: 73px;
}
  .avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }
  .avatar-uploader .el-upload:hover {
    border-color: #409EFF;
  }
  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 120px;
    height: 120px;
    line-height: 120px;
    text-align: center;
    background-color: #cacaca;
  }
  .avatar {
    width: 120px;
    height: 120px;
    display: block;
  }
  .afeio {
    width: 200px;
    margin-left: 48px;
    margin-bottom: 12px;
    display: flex;
    justify-content: space-between;
  }
</style>
